<template>
	<view v-if="info" class="content">
		<view class="u-p-28">
			<view class="border-title">
				<text v-show="source == 3">联系送养人</text>
				<text v-show="source == 2">联系领养人</text>
				<text v-show="source == 1">联系送养人</text>
			</view>

			<publisher v-if="source == 3" hide-title customClass="border-r-6" :user="info.adopt.user"
				:info="info.adopt">
			</publisher>

			<publisher v-if="source == 2" hide-title customClass="border-r-6" :user="info.user" :info="info">
			</publisher>

			<publisher v-if="source == 1" hide-title customClass="border-r-6" :user="info.adopt.user"
				:info="info.adopt">
			</publisher>

			<view class="border-title u-m-t-28 u-m-b-10">
				处理提示
			</view>
			<u-alert-tips :type="statusInfo.type" :title="statusInfo.audit_status" :description="statusInfo.desc">
			</u-alert-tips>

			<view v-show="info.refuse_reason" class="u-m-t-20">
				<u-alert-tips type="error" title="拒绝原因" :description="info.refuse_reason">
				</u-alert-tips>
			</view>

			<!--  source  1=我的消息-领养申请回复通知 2=我的消息-您有一条新的领养申请 3=申请领养后跳转来的-->
			<!-- 注意事项展示条件 1.来自于申请领养 2.来自领养申请回复通知 且 审核状态为已通过 -->
			<block v-if="source ==3 || (source == 1 && info.audit_status == 2)">

				<view class="border-title u-m-t-28 u-m-b-14">
					注意事项
				</view>
				<view class="tip bg-white u-font-14 u-p-20">
					<view class="border-b u-p-t-10 u-p-b-10">
						1.联系前请确认符合领养要求；
					</view>
					<view class="border-b u-p-t-10 u-p-b-10">
						2.领养押金需交由平台保管，如涉及押金领养请联系义工；
					</view>
					<view class="u-p-t-10 u-p-b-10">
						3.如实际领养信息与发布内容不符，或要求支付定金、邮费等情况，请一定不要相信，及时在留言区举报。
					</view>
				</view>
			</block>


			<view class="border-title u-m-t-28 u-m-b-20">
				申请领养的宠物
			</view>
			<index-card no-border border-radius :item="info.adopt"></index-card>

			<view class="border-title u-m-t-28 u-m-b-14">
				申请问卷
			</view>

			<view class="cell">
				<view class="item">
					<text>称呼</text>
					<text class="color-3 u-line-1">{{info.nickname}}</text>
				</view>
				<view class="item">
					<text>性别</text>
					<text class="color-3 u-line-1">{{info.sex_text}}</text>
				</view>
				<view class="item">
					<text>年龄</text>
					<text class="color-3 u-line-1">{{info.age}}</text>
				</view>
				<view class="item">
					<text>婚姻状况</text>
					<text class="color-3 u-line-1">{{info.marital}}</text>
				</view>
				<view class="item">
					<text>住房情况</text>
					<text class="color-3 u-line-1">{{info.house}}</text>
				</view>

				<view class="item">
					<text>从事职业</text>
					<text class="color-3 u-line-1">{{info.job}}</text>
				</view>
				<view class="item">
					<text>详细地址</text>
					<text class="color-3 u-line-1">{{info.location}}</text>
				</view>
				<view class="item">
					<text>养宠经验</text>
					<text class="color-3 u-line-1">{{info.experience}}</text>
				</view>
				<view class="item">
					<text>申请语</text>
					<text class="color-3 u-line-1">{{info.apply_term}}</text>
				</view>
			</view>


		</view>

		<!-- 返回顶部 -->
		<u-back-top :duration="1000" :scroll-top="scrollTop"></u-back-top>

		<!-- 底部操作按钮 -->
		<!-- // source  1=我的消息-领养申请回复通知 2=我的消息-您有一条新的领养申请 3=申请领养后跳转来的 -->
		<view v-if="source ==2 && info.audit_status===1" class="submit">
			<view class="btn" @click="submit(2)">同意</view>
			<view class="btn" @click="noSubmit">拒绝</view>
		</view>

		<!-- 拒绝理由弹框 -->
		<u-mask :show="showModal" @click="showModal = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="color-3 u-font-12 u-p-24 u-text-center">
						拒绝原因
					</view>
					<view class="input u-m-l-80 u-m-r-80">
						<u-input :clearable="false" v-model="refuse_reason" :custom-style="inputStyle" height="168" type="textarea"
							placeholder="请输入拒绝原因">
						</u-input>
					</view>
					<view class="u-flex u-text-center border-t u-m-t-20 u-font-12">
						<view @click="cancel" class="u-flex-1 ok color-6">
							取消
						</view>
						<view @click="submit(3)" class="u-flex-1 ok">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
	import indexCard from '@/components/indexCard/indexCard.vue';
	import publisher from '@/components/publisher/publisher.vue';


	import {
		applyAudit,
		getAdoptsApplyDetail
	} from '@/api/index';
	import {
		getMyMessageDetail
	} from '@/api/user';
	export default {
		components: {
			indexCard,
			publisher
		},
		computed: {
			statusInfo() {
				// 1待处理 2已同意 3已拒绝
				let info = {};
				if (!this.info) return;
				switch (this.info.audit_status) {
					case 1:
						let desc = '如有兴趣与领养人进一步沟通请选择“同意”，如不合适请选择“拒绝”。';
						if (this.source == 3) {
							desc = '您的申请已通知送养人，请通过上方联系方式及时与送养人取得联系。';
						}
						info = {
							type: 'warning',
							audit_status: '待处理',
							desc
						};
						break;
					case 2:
						info = {
							type: 'success',
							audit_status: '已同意',
							desc: '您通过了领养人的申请，请通过上方联系方式及时与领养人取得联系。'
						};
						if (this.source == 1) {
							info.desc = '送养人已同意您的领养申请，有意向继续沟通，请通过上方联系方式及时与送养人取得联系。'
						}

						break;
					case 3:
						info = {
							type: 'error',
							audit_status: '已拒绝',
							desc: '您拒绝了领养人的申请。',
						};
						if (this.source == 1) {
							info.desc = '送养人拒绝了您的申请，再看看其他小可爱吧~'
						}
						break;
					default:
						break;
				}
				info.audit_status = '当前状态：' + info.audit_status;
				return info;

			}
		},
		data() {
			return {
				apply_id: '', // source=3传过来的id
				messageId: '', // source =1 2的消息id
				source: '',
				info: null,
				showModal: false,
				refuse_reason: '', //拒绝理由
				scrollTop: 0,
				inputStyle: {
					borderRadius: '6px',
					padding: '9px 12px',
					fontSize: '12px'
				},

			};
		},
		onLoad(options) {
			// source  1=我的消息-领养申请回复通知 
			// 2=我的消息-您有一条新的领养申请  
			// 3=申请领养后跳转来的
			this.source = options.source;

			// source = 3则该id是 领养申请成功后返回的apply_id
			// source = 1 2则是消息id
			this.messageId = options.id;

			if (this.source == 3) {
				uni.setNavigationBarTitle({
					title: "领养申请"
				})
				this.getAdoptsApplyDetail();
			} else {
				this.getMyMessageDetail();
			}
		},
		mounted() {},
		methods: {
			async getAdoptsApplyDetail() {
				const res = await getAdoptsApplyDetail({
					apply_id: this.messageId
				});
				const data = res.data;
				this.info = data;
			},
			async getMyMessageDetail() {
				const res = await getMyMessageDetail({
					id: this.messageId
				});
				const data = res.data;
				this.info = data;
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			noSubmit() {
				if (this.info.audit_status !== 1) return;
				this.showModal = true;
			},
			cancel() {
				this.showModal = false;
				this.refuse_reason = '';
			},
			async submit(audit_status) {
				if (audit_status === 3 && !this.refuse_reason) {
					return uni.showToast({
						title: '请输入拒绝理由',
						icon: "none",
						mask: true,
					});

				}
				const res = await applyAudit({
					id: this.info.id, // 审核时传消息详情接口返回的id
					audit_status,
					refuse_reason: this.refuse_reason,
				});
				if (res.code === 1) {
					uni.showToast({
						title: res.msg,
						icon: "none",
						mask: true,
					});

					this.cancel();
					if (this.source == 3) {
						this.getAdoptsApplyDetail();
					} else {
						this.getMyMessageDetail();
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 140rpx;
	}

	.submit {
		padding: 32rpx 126rpx;
		background-color: #fff;
		box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.03);
		border-radius: 10px 10px 0px 0px;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 2;

		&.disabled {
			.btn {
				background: rgba(0, 184, 86, 0.53);

				&:last-of-type {

					background: rgba(225, 66, 66, 0.6);
				}
			}
		}

		.btn {
			height: 34px;
			line-height: 34px;
			color: #fff;
			font-size: 16px;
			background: #19C76A;
			border-radius: 22px;
			text-align: center;
			width: 214rpx;

			&:last-of-type {
				background-color: #EE5F5F;
			}
		}
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.rect {
			width: 297px;
			background-color: #fff;
			border-radius: 6px;
		}

		.input {
			background-color: #F2F2F2;
		}

		.ok {
			height: 40px;
			line-height: 40px;

			&:last-of-type {
				color: #438EFF;
			}
		}
	}

	.tip {
		color: #F18324;
		border-radius: 6px;
	}

	.border-title {
		&::before {
			height: 70%;
		}
	}

	.cell {
		border-radius: 6px;
		background-color: #fff;
		padding: 0 20rpx;

		.item {
			height: 42px;
			font-size: 14px;
			color: #666;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #ECECEC;

			.u-line-1 {
				max-width: 500rpx;
			}

			&:last-of-type {
				border-bottom: none;
			}
		}
	}
</style>
